single-spa add sub app

Core 概念

parent app

sub apps

import-map

1. Add exsiting code

example:

https://gyazo.com/27c358261dee9890cc8de8143142a6d5

I'd like to add this page in my project.

How to do?

code:importmap

<!-- Step 1 -->

<script type="systemjs-importmap" src="importmap/react-mf-importmap.json"></script>

2. register application in parent app

code:registerApplication

// Step 2:

registerApplication({

name: '@react-mf/planets',

app: () => System.import('@react-mf/planets'),

activeWhen: '/planets',

});

3. modify a little CSS

code:css

<!-- Step 3 -->

<style>

margin-left: var(--navbar-width)

}

</style>

Preview:

https://gyazo.com/3c0f312c99594a4b84e00df36fa47896

2 Add the new code

Vue3

1. set public path

5. register application in parent app

6. preview

1. set public path

code:install

$ yarn add systemjs-webpack-interop

code:set-public-path.js

import { setPublicPath } from 'systemjs-webpack-interop';

setPublicPath('@svelte-mf/posts');

2. export bootstrap mount unmount

code:main.js

import './set-public-path';

import singleSpaSvelte from 'single-spa-svelte';

import App from './App.svelte';

const svelteLifecycles = singleSpaSvelte({

component: App,

});

export const bootstrap = svelteLifecycles.bootstrap;

export const mount = svelteLifecycles.mount;

export const unmount = svelteLifecycles.unmount;

3. modify webpack-config.js for build system

code:webpack-config.js

module.exports = {

output: {

path: __dirname + '/public',

++ libraryTarget: 'system',

},

code:importmap.json

{

"imports": {

...

}

}

5. register application in parent app

code:registerApplication

registerApplication(

'@svelte-mf/posts',

() => System.import('@svelte-mf/posts'),

(location) => location.pathname.startsWith('/posts')

);

6. preview

https://gyazo.com/8dddaab5b0ed905f9a992ef0b8679d5a

CSS 考えから

code

親から子供通信

window notification

sockjs

API

props